<template>
  <div v-loading="ButtonLoading">
    <div class="mb-3">
      <el-button
        v-if="customerData.project_status === '0' || customerData.project_status === '2'"
        type="primary"
        @click="editStatus = !editStatus"
      >
        编辑
      </el-button>
    </div>

    <table class="table table-bordered" style="text-align: center">
      <colgroup>
        <col width="25%" />
        <col width="25%" />
        <col width="25%" />
        <col width="25%" />
      </colgroup>
      <tr>
        <td>常用工人</td>
        <td>
          <span v-if="!editStatus">{{ tableData.emp_com_used || '-' }}</span>
          <el-input-number
            v-else
            v-model="PostData.emp_com_used"
            style="width: 85%"
            :controls="false"
            :min="0"
            :step="1"
          ></el-input-number>
        </td>
        <td>临时工人</td>
        <td>
          <span v-if="!editStatus">{{ tableData.emp_temp || '-' }}</span>
          <el-input-number
            v-else
            v-model="PostData.emp_temp"
            style="width: 85%"
            :controls="false"
            :min="0"
            :step="1"
          ></el-input-number>
        </td>
      </tr>
      <tr>
        <td>用工总数</td>
        <td>
          <span v-if="!editStatus">{{ tableData.emp_total || '-' }}</span>
          <el-input-number
            v-else
            v-model="PostData.emp_total"
            style="width: 85%"
            :controls="false"
            :min="0"
            :step="1"
          ></el-input-number>
        </td>
        <td>贫困户数</td>
        <td>
          <span v-if="!editStatus">{{ tableData.poverty_households || '-' }}</span>
          <el-input-number
            v-else
            v-model="PostData.poverty_households"
            style="width: 85%"
            :controls="false"
            :min="0"
            :step="1"
          ></el-input-number>
        </td>
      </tr>
      <tr>
        <td>近一年人工支出(万元)</td>
        <td>
          <span v-if="!editStatus">{{ tableData.year_emp_exp || '-' }}</span>
          <el-input-number
            v-else
            v-model="PostData.year_emp_exp"
            style="width: 85%"
            :controls="false"
            :min="0"
          ></el-input-number>
        </td>
        <td>备注</td>
        <td>
          <span v-if="!editStatus">{{ tableData.remark || '-' }}</span>
          <el-input v-else v-model="PostData.remark" style="width: 85%"></el-input>
        </td>
      </tr>
    </table>

    <el-row
      v-show="editStatus"
      class="row-bg"
      justify="center"
      style="text-align: center; padding: 1rem"
      type="flex"
    >
      <el-col :span="6">
        <el-button type="primary" @click="close">取消</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="submit">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: {},
      PostData: {},
      tableName: 'datum_customer_emp',
      editStatus: false,
      ButtonLoading: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.customerData = JSON.parse(sessionStorage.getItem('customer_related_view'))
    this.id = this.$route.query.id || sessionStorage.getItem('customer_related_id')
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.$api
        .getData('credit', this.tableName, { 'customer_related_id.eq': this.id })
        .then(res => {
          if (res && res.data) {
            this.tableData = res.data[0]
            this.PostData = { ...this.tableData }
          }
        })
    },
    close() {
      this.editStatus = false
      this.PostData = { ...this.tableData }
    },
    async submit() {
      if (this.PostData.datum_customer_emp_id) {
        this.ButtonLoading = true
        const [, err] = await this.$utils.promise(
          this.$api.updateData(
            'credit',
            this.tableName,
            this.PostData.datum_customer_emp_id,
            this.PostData
          )
        )
        this.ButtonLoading = false
        if (err) {
          this.$message.error('修改失败！请重试！')
        } else {
          this.$message.success('修改成功！')
          this.getData()
          this.close()
        }
      } else {
        this.PostData.customer_related_id = this.id
        this.ButtonLoading = true
        const [, err] = await this.$utils.promise(
          this.$api.addData('credit', this.tableName, this.PostData)
        )
        this.ButtonLoading = false
        if (err) {
          if (err.status === 403) {
            return this.$message.error('还没有给您授权，请找相关部门负责人！')
          } else {
            return this.$message.error('保存失败！请重试！')
          }
        } else {
          this.$message.success('保存成功！')
          this.getData()
          this.close()
        }
      }
    },
  },
}
</script>
<style scoped></style>
